<template>
  <div class="box">
    <div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
    </div>
    <div>
      <div>
        <p>{{ (lineTotalLength/1000).toFixed(2) }}</p>
        <p>管段总长(Km)</p>
      </div>
      <div>
        <p>{{ (zyLineTotalLength/1000).toFixed(2) }}</p>
        <p>中压管总长(Km)</p>
      </div>
    </div>
    <div>
      <div><img src="../../../assets/img/chart1.png" /></div>
      <div><img src="../../../assets/img/chart1.png" /></div>
    </div>
    <div>
      <div>
        <p>{{ pointTotalNum }}</p>
        <p>管点数量（个）</p>
      </div>
      <div>
        <p>{{ maxPointTotalNum }}</p>
        <p>燃气表总数(个)</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { orderBy } from "lodash";
import DashboardAPI from "@/api/DashboardAPI";
const lineTotalLength = ref(1);
const pointTotalNum = ref(0);
const zyLineTotalLength = ref(0);
const maxPointTotalNum = ref(0);

// 查询：管点分组统计信息
function f_QueryGisPointGroupInfo() {
  pointTotalNum.value = 0;
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "01",
    isCollection: true,
  };
  DashboardAPI.api_query_gis_point_group_info(params).then(({ data }) => {
    if (data && data.length) {
      data.forEach((item) => {
        pointTotalNum.value += item.num;
      });

      let maxNum = orderBy(
        data.filter((item: any) => item.num),
        ["num"],
        ["desc"]
      )[0].num;

      console.log(
        orderBy(
          data.filter((item: any) => item.num),
          ["num"],
          ["desc"]
        )
      );
      maxPointTotalNum.value = maxNum;
    }
  });
}

// 查询：管段分组统计信息
function f_QuryGisLineGroupInfo() {
  lineTotalLength.value = 0;
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "02",
  };
  DashboardAPI.api_query_gis_line_group_info(params).then(({ data }) => {
    if (data && data.length) {
      data
        .filter((item: any) => item.length)
        .forEach((item) => {
          lineTotalLength.value += item.length;
        });
      let maxData = orderBy(
        data.filter((item: any) => item.length),
        ["length"],
        ["desc"]
      )[0];
      let maxLength = 0;
      if (maxData) {
        maxLength = maxData.length;
      }

      zyLineTotalLength.value = maxLength;
    }
  });
}

onMounted(() => {
  f_QueryGisPointGroupInfo();
  f_QuryGisLineGroupInfo();
});
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  background: transparent;

  > div:first-child,
  > div:first-child + div + div {
    flex: 1;
    // display: flex;
    // justify-content: center;
  }

  > div:first-child + div,
  > div:first-child + div + div + div {
    flex: 2;
    padding-top: 2vh;
  }

  > div {
    > div {
      height: 9vh;

      img {
        position: relative;
        top: 50%;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
      }

      p {
        height: 3vh;
        margin: 0;
        line-height: 3vh;
        text-align: center;
      }

      > p:first-child {
        font-family: YouSheBiaoTiHei, sans-serif;
        font-size: 1.8vh;
        color: #fcd966;
      }

      > p:last-child {
        font-size: 1vh;
      }
    }
  }
}

.star {
  padding: 1vh;

  > div {
    margin-bottom: 0.5vh;
    font-size: 1vh;
    color: #c2e0ffa4;

    span {
      display: inline-block;
      width: 1.2vh;
      height: 1.2vh;
      margin-right: 0.6vh;
      line-height: 1.2vh;
      vertical-align: sub;
      background: #fff;
      border-radius: 50%;
    }

    span.color1 {
      background: #0f8;
    }

    span.color2 {
      background: #a2e7b7;
    }

    span.color3 {
      background: #fcd966;
    }

    span.color4 {
      background: #ee6868;
    }
  }
}
</style>
